<template>
	<!-- 注册账号 -->
	<view class="register">
		<baseHead :showReturn="false" bg="transparent">
			<template name="1" slot="headLeft">
				<view class="flex-around" @click="guangbei">
					<u-icon name="close"></u-icon>
				</view>
			</template>
		</baseHead>
		<view style="padding: 100rpx 60rpx 16rpx; color: #030303; font-size: 46rpx; font-weight: bold;">
			注册账号
		</view>
		<view class="content">
			<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="form1">
				<u-form-item label="" prop="shojihao" borderBottom ref="item1">
					<view class="inuts lsdgs">
						<u-input v-model="userInfo.shojihao" border="none" type="number" placeholder="请输入手机号">
							<u--text :text="textd" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
						</u-input>
					</view>
				</u-form-item>
				<u-form-item label="" prop="yzmm" borderBottom ref="item1">
					<view class="inuts lsdgs">
						<!-- #ifndef APP-NVUE -->
						<u-input v-model="userInfo.yzmm" border="none" placeholder="请输入验证码">
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input v-model="userInfo.yzmm" border="none" placeholder="请输入验证码">
								<!-- #endif -->
								<template slot="suffix">
									<u-button @tap="yanzhengma" :text="tips" color="linear-gradient(64deg, #008efe 0%, #2d5dff 100%)" type="success" size="mini"
										:disabled="disabled1"></u-button>
								</template>
								<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</u-form-item>
				<u-form-item label="" prop="password1" borderBottom ref="item1">
					<view class="inuts lsdgs">
						<u--input v-model="userInfo.password1" border="none" placeholder="请设置6-12位登录密码" password>
						</u--input>
					</view>
				</u-form-item>
				<u-form-item label="" prop="password2" borderBottom ref="item1">
					<view class="inuts lsdgs">
						<u--input v-model="userInfo.password2" border="none" placeholder="再次输入密码" password></u--input>
					</view>
				</u-form-item>
			</u--form>
			<u-button type="primary" text="立即注册" color="linear-gradient(64deg, #008efe 0%, #2d5dff 100%)" customStyle="margin-top: 50px" @click="register"></u-button>
			<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false">
			</u-code>

			<view style="margin-top:30rpx;text-align: center; color: #B2B2B2;">
				<text @click="guangbei">已有账户 立即登录</text>
			</view>

		</view>
	</view>
</template>

<script>
import baseHead from "@/pages/component/baseHead.vue";
export default {
  data() {
    return {
      textd: "+86 | ",

      disabled1: false,
      title: "注册",
      userInfo: {
        shojihao: null,
        yzmm: null,
        password1: null,
        password2: null,
      },
      tips: "",
      rules: {
        yzmm: {
          type: "string",
          require: true,
          message: "请输入验证码",
          trigger: ["blur"],
        },
        shojihao: [
          {
            type: "number",
            required: true,
            message: "请输入手机号",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return uni.$u.test.mobile(value);
            },
            message: "请输入正确的手机号",
            trigger: ["change", "blur"],
          },
        ],
        password1: [
          {
            required: true,
            min: 6,
            max: 12,
            message: "请设置6-12位登录密码 必须有大小写字母和数字组成",
            trigger: ["change", "blur"],
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/,
            // 正则检验前先将值转为字符串
            transform(value) {
              return String(value);
            },
            message: "必须有大小写字母和数字组成，不能包含特殊字符",
            trigger: ["change", "blur"],
          },
        ],
        password2: [
          {
            required: true,
            min: 6,
            max: 12,
            message: "请设置6-12位登录密码",
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/,
            // 正则检验前先将值转为字符串
            transform(value) {
              return String(value);
            },
            message: "必须有大小写字母和数字组成，不能包含特殊字符",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  // watch:{
  // 	themeBgColor:{
  // 		handler(nVal, oVal) {
  // 			console.log(nVal);
  // 			console.log(oVal);
  // 		},
  // 		deep: true
  // 	}
  // },
  //子组件
  components: {
    baseHead,
  },
  // 计算属性
  computed: {},
  // 监听页面初始化
  onInit() {},
  // 监听页面加载，其参数为上个页面传递的数据
  onLoad(option) {},
  //  启动，从后台进入前台显示  或从后一个跳转到前一个页面
  onShow() {},
  // 监听页面初次渲染完成
  onReady() {
    this.$refs.form1.setRules(this.rules);
  },
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  // 创建完成立即调用
  created() {},
  // 监听窗口尺寸变化
  onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},
  // 页面滚动到底部的事件
  onReachBottom() {},
  // 点击 tab 时触发，参数为Object
  onTabItemTap() {},
  // 计算方法
  methods: {
    codeChange(text) {
      this.tips = text;
    },

    guangbei() {
      uni.navigateBack();
    },
    yanzhengma() {
      if (!this.userInfo.shojihao) {
        uni.$u.toast("请输入手机号");
        return;
      }
      let email_reg =
        /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
      if (email_reg.test(this.userInfo.shojihao)) {
        let obj = {
          PhoneNumber: this.userInfo.shojihao,
          Length: 4,
        };
        if (this.$refs.uCode.canGetCode) {
          uni.showLoading({
            title: "正在获取验证码",
          });
          this.$http.core.sendSmsCode(obj).then((res) => {
            uni.hideLoading();
            uni.$u.toast(res.Message);
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          });
        } else {
          uni.$u.toast("倒计时结束后再发送");
        }
      } else {
        uni.$u.toast("手机号错误");
      }
    },
    register() {
      this.$refs.form1
        .validate()
        .then((res) => {
          if (!this.userInfo.shojihao) {
            uni.$u.toast("请输入手机号");
            return;
          }
          if (!this.userInfo.yzmm) {
            uni.$u.toast("请输入验证码");
            return;
          }
          if (!this.userInfo.password1) {
            uni.$u.toast("请输入密码");
            return;
          }

          if (!this.userInfo.password2) {
            uni.$u.toast("请再次输入密码");
            return;
          }

          if (this.userInfo.password1 != this.userInfo.password2) {
            uni.$u.toast("两次输入的密码不正确");
            return;
          }
          let obj = {
            Phone: this.userInfo.shojihao,
            Password: this.userInfo.password1,
            VerifCode: this.userInfo.yzmm,
          };
          this.$http.core.register(obj).then((res) => {
            if (res.Success) {
              uni.$u.toast("注册成功");
              uni.setStorageSync("chuci", 0);
              setTimeout((res) => {
                // uni.navigateBack();
                this.login();
              }, 1000);
            }
          });
        })
        .catch((errors) => {
          uni.$u.toast("校验失败");
        });
    },
    login() {
      this.$util.HrcLogin(this.userInfo.shojihao, this.userInfo.password1);
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .u-form-item__body__right__message {
  margin-left: 0 !important;
}

.register {
  height: 100vh;
  background-image: url("/static/image/my/loginbg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
  padding: 20rpx 60rpx;

  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;

  .inuts {
    background-color: #ffffff;
    width: 100%;
    padding: 27rpx 0rpx;
    box-sizing: border-box;

    .inputcss {
      width: 100%;
      color: #000;
      flex: 1;
      box-sizing: border-box;
    }
  }
}

.denlu_button {
  border: 0px solid #bfbaba;
  height: 90rpx;
  font-size: 30rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
}

.zhuc {
  color: #ffffff;
  background: linear-gradient(64deg, #008efe 0%, #2d5dff 100%);
}

.tetyfle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.lsdgs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.yzmsdgsm {
  color: #2c5eff;
  font-size: 24rpx;
  margin-right: 10rpx;
}

/deep/.tui-checkbox__input {
  background-color: #ffffff00 !important;
  border: 1rpx solid #d6d6d6 !important;
  border-radius: 10rpx !important;
}
</style>